<!-- 我的一级页面 -->
<template>
  <view class="my">
    <view class="bg">
     <view class="userInfoBg"/>
    </view>
    <!-- 用户星系 -->
    <view class="userInfo">
      <!-- 头像 -->
      <view class="userAvatar">
      头像
      </view>
      <!-- 名字 -->
      <view class="userName">
        李四·管理员
      </view>
    </view>
  <view class='list'>
    <view class="listBox">
    <span class="listIcon"><image src="../../static/icons/喜爱.png" mode=""></image>修改资料</span>
    <span><image src="../../static/icons/箭头 右.png" mode=""></image></span> 
    </view>
    <view class="listBox">
      <span class="listIcon"><image src="../../static/icons/锁,密码,开锁,解锁.png" mode=""></image>修改密码</span>
     <span><image src="../../static/icons/箭头 右.png" mode=""></image></span> 
    </view>
    <view class="listBox">
      <span class="listIcon"><image src="../../static/icons/信息.png" mode=""></image>关于我们</span>
      <span><image src="../../static/icons/箭头 右.png" mode=""></image></span> 
      </view>
    <view class="listBox">
      <span class="listIcon"><image src="../../static/icons/设置_填充.png" mode=""></image>设置</span> 
      <span><image src="../../static/icons/箭头 右.png" mode=""></image></span> 
      </view>
  </view>
  </view>
</template>

<script>
	export default {
	}
</script>

<style lang="scss" scoped>

  .bg {
    width: 100%;
    height: 390rpx;
    position: relative;
  }
  .userInfoBg {
      position: absolute;
      left: -40%;
      top: 0%;
      width: 1351rpx;
      height: 711rpx;
      border-radius: 50%;
      margin-top: -261rpx;
      overflow: hidden;
      background: linear-gradient(110deg, #80efb1 0%, #64c0b1 100%);
      z-index: -1;
  }
  .userInfo {
    width: 100%;
    .userAvatar {
      width: 178rpx;
      height: 178rpx;
      border-radius: 50%;
      background-color: red;
      overflow: hidden;
      text-align: center;
      line-height: 178rpx;
      box-shadow: 5rpx 5rpx 10rpx white;
      margin: -130rpx auto -20rpx;
    }
    .userName {
      width: 318rpx;
      height: 62rpx;
      background-color: #fff;
      box-shadow: 5rpx 5rpx 10rpx rgba(0,0,0,.3);
      border-radius: 32rpx;
      text-align: center;
      line-height: 62rpx;
      margin: 0 auto;
    }
  }
  
  .list {
    margin-top: 80rpx;
    .listBox {
      // width: 100%;
      height: 96rpx;
      background-color: #fff;
      box-shadow: 5rpx 5rpx 10rpx rgba(0,0,0,.3);
      display: flex;
      justify-content: space-between;
      padding: 25rpx 26rpx;
      margin: 0rpx 26rpx 40rpx;
      span {
        width: 50rpx;
        height: 50rpx;
        line-height: 50rpx;
        image {
          width: 35rpx;
          height: 35rpx;
        }
      }
      .listIcon {
        width: 250rpx;
        image {
          margin-right: 20rpx;
        }
      }
    }
  }

</style>